<template >
  <div id="pdfDom1">
    <div id="basic" style="margin:auto;">
    <!-- <div class="title">儿童膳食测评报告</div> -->
    <!-- <div id="createTime">报告日期：{{ report_time }}</div> -->
    <!-- <el-divider  border-style="dashed"  style="border-color:#2AB28B">
      <div class="subTitle">基本信息</div>
    </el-divider> -->
    <div style="display:flex;">
      <div style=" width: 60%; background-color:#2ab28b; height: 100px; text-align: center; line-height: 100px;">
          <span style="font-size: 30px; font-weight: bold; color: #ffffff">儿童</span><span style="font-size: 30px; color: #666666; margin-left: 20px">基本信息报告</span>
        </div>
        <div style="height: 100px; width: 40%; background-color:#2ab28b; ">
          <!-- <img src="../../assets/img/11.jpg" style="height: 100%; width: 100%" alt=""/> -->
        </div>
    </div>
     <div style="width: 100%; height: 40px; background-color: #2AB28B; margin-top: 10px; display: flex;">
            <div><img src="../../assets/img/12.jpg" style="height: 40px" alt="" /></div>
            <div style="font-size: 20px; margin-left: 10px; line-height: 40px; color: #fff;">儿童基本信息</div>
          </div>
          <div style="width: 99%; border-top: 2px solid #09a578; border-right: 2px solid #09a578;  margin-top: 10px;font-size:14px;">
            <div style="display: flex">
              <div
                style="background-color: #2AB28B; width: 9.9%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
                检测日期</div>
              <div
                style="width: 90%; height: 40px; border-bottom: 2px solid #09a578; line-height: 40px; text-indent: 20px;">
                {{ report_time }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="background-color: rgb(42, 178, 139); width: 10%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
                儿童姓名
              </div>
              <div
                style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
                {{ contents.username ?? '[]' }}
              </div>
              <div
                style="background-color: rgb(42, 178, 139);width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
                性别
              </div>
              <div
                style="width: 15%; height: 40px; text-align: center;line-height: 40px;border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
                {{ contents.sex == 1 ? '女' : '男' ?? '[]' }}
              </div>
              <div
                style="background-color: rgb(42, 178, 139); width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578;">
                出生日期
              </div>
              <div
                style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
                {{ birth ?? '[]' }}
              </div>
              <div
                style=" background-color: rgb(42, 178, 139); width: 10%; height: 40px; text-align: center; line-height: 40px;color:#fff; border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
                监护人姓名
              </div>
              <div
                style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #09a578;">
                {{ contents.guardian_name ?? '[]' }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
                监护人手机号
              </div>
              <div
                style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
                {{ contents.guardian_mobile ?? '[]' }}
              </div>
              <div
                style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
                身高
              </div>
              <div
                style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
                {{ contents.height ?contents.height+'CM': '' }}
              </div>
              <div
                style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
                体重
              </div>
              <div
                style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
                {{ contents.weight ?contents.weight+'KG': '' }}
              </div>
              <div
                style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
                头围
              </div>
              <div
                style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #09a578;">
                {{ contents.touwei ?contents.touwei+'CM': '' }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
                出生身长
              </div>
              <div
                style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
                {{ contents.chushengsg ?contents.chushengsg+'CM': '' }}
              </div>
              <div
                style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
                出生体重
              </div>
              <div
                style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
                {{ contents.chushengtz ?contents.chushengtz+'KG':'' }}
              </div>
              <div
                style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
                腹围
              </div>
              <div
                style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
                {{ contents.fuwei ?contents.fuwei+'CM': '' }}
              </div>
              <div
                style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
                血型
              </div>
              <div
                style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #09a578;">
                {{ contents.xuexing_value ?contents.xuexing_value: '' }}
              </div>
            </div>
            <div style="display: flex">
              <div
                style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
                民族
              </div>
              <div
                style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
                {{ contents.minzu_value ?contents.minzu_value: '' }}
              </div>
              <div
                style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
                与监护人关系
              </div>
              <div
                style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
                {{ contents.guanxi_value ? contents.guanxi_value: '' }}
              </div>
              <div
                style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
                家长受教育程度
              </div>
              <div
                style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #09a578; border-bottom: 2px solid #09a578; ">
                {{ contents.jiaoyu_value ?contents.jiaoyu_value :'' }}
              </div>
              <div
                style="background-color: rgb(42, 178, 139);width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;">
                出生情况
              </div>
              <div
                style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #09a578;">
                {{ contents.birthSituation_value ?contents.birthSituation_value:'' }}
              </div>
            </div>
          </div>

    <!-- <div class="symptom">
      <div class="params ">
        <div class="shu"></div>
        其他信息</div>
      <div class="symptom_content">
        <div>妊娠不良习惯：{{contents.Bad_value ?? '[]'}}</div>
      </div>
      <div class="symptom_content">
        <div>妊娠疾病情况：{{contents.disease_value ?? '[]'}}</div>
      </div>
    </div> -->
     <!-- 其他信息 -->
          <div style="width: 100%;height: 40px;background-color: rgb(42, 178, 139);margin-top: 10px;display: flex;">
            <div><img src="../../assets/img/12.jpg" style="height: 40px" alt="" /></div>
            <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
              其他信息
            </div>
          </div>
          <div style="width: 99%; border-top: 2px solid #09a578; border-right: 2px solid #09a578; margin-top: 10px">
            <div style="display: flex; ">
              <div style="background-color: rgb(42, 178, 139);width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;display:flex;align-items: center;justify-content:center;">
                妊娠不良习惯
              </div>
              <div style="width: 90%;border-bottom: 2px solid #09a578;line-height: 40px;padding:0px 20px;">
                 {{contents.Bad_value ?? '[]'}}
                 
              </div>
            </div>
            <div style="display: flex">
                <div style="background-color: rgb(42, 178, 139);width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;display:flex;align-items: center;justify-content:center;">
                妊娠疾病情况
              </div>
               <div style="width: 90%;border-bottom: 2px solid #09a578;line-height: 40px;padding:0px 20px;">
                   {{contents.disease_value ?? '[]'}}
              </div>
            </div>
          </div>

    <!-- <div class="symptom">
      <div class="params ">
        <div class="shu"></div>
        孩子临床表现</div>
      <div class="symptom_content">
        <div>头发：{{contents.hair_value ?? '[]'}}</div>
      </div>
      <div class="symptom_content">
        <div>眼睛：{{contents.eye_value ?? '[]'}}</div>
      </div>
      <div class="symptom_content">
        <div>皮肤：{{contents.skin_value ?? '[]'}}</div>
      </div>
      <div class="symptom_content">
        <div>口腔：{{contents.oralCavity_value ?? '[]'}}</div>
      </div>
      <div class="symptom_content">
        <div>牙齿：{{contents.tooth_value ?? '[]'}}</div>
      </div>
      <div class="symptom_content">
        <div>颈部：{{contents.neck_value ?? '[]'}}</div>
      </div>
      <div class="symptom_content">
        <div>神经病变：{{contents.Neuropathy_value ?? '[]'}}</div>
      </div>
      <div class="symptom_content">
        <div>神经症状：{{contents.symptoms_value ?? '[]'}}</div>
      </div>
      <div class="symptom_content">
        <div>体征：{{contents.sign_value ?? '[]'}}</div>
      </div>
      <div class="symptom_content">
        <div>骨骼：{{contents.bones_value ?? '[]'}}</div>
      </div>
    </div> -->

  <!-- 孩子临床表现 -->
          <div style="width: 100%;height: 40px;background-color: rgb(42, 178, 139);margin-top: 10px;display: flex;">
            <div><img src="../../assets/img/12.jpg" style="height: 40px" alt="" /></div>
            <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
              孩子临床表现
            </div>
          </div>
          <div style="width: 99%;  border-top: 2px solid #09a578; border-right: 2px solid #09a578; margin-top: 10px">
            <div style="display: flex">
              <div style="background-color: rgb(42, 178, 139);width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;display:flex;align-items: center;justify-content:center;">
                头发
              </div>
              <div style="width: 90%;border-bottom: 2px solid #09a578;line-height: 40px;padding:0px 20px;">
                {{contents.hair_value ?? '[]'}}
              </div>
            </div>
            <div style="display: flex">
                   <div style="background-color: rgb(42, 178, 139);width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;display:flex;align-items: center;justify-content:center;">
                眼睛
              </div>
               <div style="width: 90%;border-bottom: 2px solid #09a578;line-height: 40px;padding:0px 20px;">
                {{contents.eye_value ?? '[]'}}
              </div>
            </div>
            <div style="display: flex">
                   <div style="background-color: rgb(42, 178, 139);width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;display:flex;align-items: center;justify-content:center;">
                皮肤
              </div>
              <div style="width: 90%;border-bottom: 2px solid #09a578;line-height: 40px;padding:0px 20px;">
                {{contents.skin_value ?? '[]'}}
              </div>
            </div>
            <div style="display: flex">
               <div style="background-color: rgb(42, 178, 139);width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;display:flex;align-items: center;justify-content:center;">
                口腔
              </div>
               <div style="width: 90%;border-bottom: 2px solid #09a578;line-height: 40px;padding:0px 20px;">
                {{contents.oralCavity_value ?? '[]'}}
              </div>
            </div>
            <div style="display: flex">
              <div style="background-color: rgb(42, 178, 139);width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;display:flex;align-items: center;justify-content:center;">
                牙齿
              </div>
                <div style="width: 90%;border-bottom: 2px solid #09a578;line-height: 40px;padding:0px 20px;">
                {{contents.tooth_value ?? '[]'}}
              </div>
            </div>
            <div style="display: flex">
            <div style="background-color: rgb(42, 178, 139);width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;display:flex;align-items: center;justify-content:center;">
                颈部
              </div>
               <div style="width: 90%;border-bottom: 2px solid #09a578;line-height: 40px;padding:0px 20px;">
                 {{contents.neck_value ?? '[]'}}
              </div>
            </div>
            <div style="display: flex">
             <div style="background-color: rgb(42, 178, 139);width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;display:flex;align-items: center;justify-content:center;">
                神经病变
              </div>
               <div style="width: 90%;border-bottom: 2px solid #09a578;line-height: 40px;padding:0px 20px;">
                {{contents.Neuropathy_value ?? '[]'}}
              </div>
            </div>
            <div style="display: flex">
              <div style="background-color: rgb(42, 178, 139);width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;display:flex;align-items: center;justify-content:center;">
                神经症状
              </div>
               <div style="width: 90%;border-bottom: 2px solid #09a578;line-height: 40px;padding:0px 20px;">
                  {{contents.symptoms_value ?? '[]'}}
              </div>
            </div>
            <div style="display: flex">
              <div style="background-color: rgb(42, 178, 139);width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;display:flex;align-items: center;justify-content:center;">
                体征
              </div>
               <div style="width: 90%;border-bottom: 2px solid #09a578;line-height: 40px;padding:0px 20px;">
                   {{contents.sign_value ?? '[]'}}
              </div>
            </div>
            <div style="display: flex">
               <div style="background-color: rgb(42, 178, 139);width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;display:flex;align-items: center;justify-content:center;">
                骨骼
              </div>
               <div style="width: 90%;border-bottom: 2px solid #09a578;line-height: 40px;padding:0px 20px;">
                     {{contents.bones_value ?? '[]'}}
              </div>

            </div>
          </div>

    <!-- <div class="symptom">
      <div class="params ">
        <div class="shu"></div>
        食物过敏</div>
      <div class="symptom_content">
        <div>过敏食物：{{contents.allergy_value ?? '[]'}}</div>
      </div>
      <div class="symptom_content">
        <div>食物不耐受：{{contents.intolerance_value ?? '[]'}}</div>
      </div>
    </div> -->

      <!-- 食物过敏 -->
          <div style="width: 100%;height: 40px;background-color: rgb(42, 178, 139);margin-top: 10px;display: flex;">
            <div><img src="../../assets/img/12.jpg" style="height: 40px" alt="" /></div>
            <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
              食物过敏
            </div>
          </div>
          <div style="width: 99%;  border-top: 2px solid #09a578; border-right: 2px solid #09a578; margin-top: 10px">
            <div style="display: flex">
            <div style="background-color: rgb(42, 178, 139);width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;display:flex;align-items: center;justify-content:center;">
                过敏食物
              </div>
                 <div style="width: 90%;border-bottom: 2px solid #09a578;line-height: 40px;padding:0px 20px;">
                        {{contents.allergy_value ?? '[]'}}
              </div>
            </div>

            <div style="display: flex">
              <div style="background-color: rgb(42, 178, 139);width: 14%;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #09a578;border-bottom: 2px solid #09a578;display:flex;align-items: center;justify-content:center;">
                食物不耐饿
              </div>
                 <div style="width: 90%;border-bottom: 2px solid #09a578;line-height: 40px;padding:0px 20px;">
                            {{contents.intolerance_value ?? '[]'}}
              </div>
            </div>
          </div>
  </div>
  </div>
 
</template>

<script setup>
import {defineComponent, onMounted, ref, watch} from 'vue';
import {useRoute, useRouter} from "vue-router"
import http, {baseUrl} from "../../utils/http";
import {ElMessage} from "element-plus";
import html2Canvas from "html2canvas";
import JsPDF from "jspdf";
const contents = ref({})
const reportId = ref()
const router = useRouter()
const route = useRoute()
const hospital_name = ref()
const report_time = ref()
const birth = ref()

const username = ref()
const guardian = ref()
const birthStatus = ref()
import PrintJS from 'print-js'

const fetchData = async () => {
  reportId.value = route.params.reportId
  username.value = route.params.username
  guardian.value = route.params.guardian
  birthStatus.value = route.params.birth
  http.get('api/archives/viewReportMember?id='+ reportId.value+'&username='+ username.value+'&guardian='+ guardian.value+'&birth='+ birthStatus.value).then((res)=> {
    if (res.data.code === 0) {
      ElMessage.error(res.data.msg)
    }
    report_time.value = res.data.data.times
    birth.value = $getTimes(res.data.data.contents.birth)
    contents.value = res.data.data.contents;
    // contents.births.value = '2077-07-07'
  })

  // setTimeout(() => {
  //   print('print-all')
  // }, 2000)

}
function $getTimes(params) {
  let date = new Date(params);
  let y = date.getFullYear();
  let m = date.getMonth() + 1;
  m = m < 10 ? "0" + m : m;
  let d = date.getDate();
  d = d < 10 ? "0" + d : d;
  const time = y + "-" + m + "-" + d;
  return time;
}

onMounted(() => {
  setTimeout(()=>{
    let eleW = document.getElementById('pdfDom1').offsetWidth// 获得该容器的宽
    //   let eleH = ele.offsetHeight // 获得该容器的高
    let eleH = document.getElementById('pdfDom1').scrollHeight// 获得该容器的高
    let eleOffsetTop = document.getElementById('pdfDom1').offsetTop// 获得该容器到文档顶部的距离
    let eleOffsetLeft = document.getElementById('pdfDom1').offsetLeft// 获得该容器到文档最左的距离

    var canvas = document.createElement("canvas")
    var abs = 0

    let win_in = document.documentElement.clientWidth || document.body.clientWidth// 获得当前可视窗口的宽度（不包含滚动条）
    let win_out = window.innerWidth// 获得当前窗口的宽度（包含滚动条）

    if (win_out>win_in) {
        // abs = (win_o - win_i)/2;    // 获得滚动条长度的一半
        abs = (win_out - win_in) / 2// 获得滚动条宽度的一半
    }
    canvas.width = eleW * 2// 将画布宽&&高放大两倍
    canvas.height = eleH * 2

    var context = canvas.getContext("2d")
    context.scale(3, 3) // 增强图片清晰度
    context.translate(-eleOffsetLeft - abs, -eleOffsetTop)

    // document.getElementById('pdfDom').style.display="block";
    // document.getElementById('pdfDom').style.backgroundColor="#FFFFFF";
    html2Canvas(document.getElementById('pdfDom1'), {
        useCORS:true//允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求。
    }).then(canvas=> {
        var contentWidth = canvas.width
        var contentHeight = canvas.height
        //一页pdf显示html页面生成的canvas高度;
        var pageHeight = (contentWidth / 592.28) * 841.89 // 这样写的目的在于保持宽高比例一致 pageHeight/canvas.width = a4纸高度/a4纸宽度// 宽度和canvas.width保持一致
        //未生成pdf的html页面高度
        var leftHeight = contentHeight
        //页面偏移
        var position = 0

        //a4纸的尺寸[595.28,841.89],单位像素，html页面生成的canvas在pdf中图片的宽高
        var imgWidth = 595.28
        var imgHeight = (595.28 / contentWidth) * contentHeight
        var pageData = canvas.toDataURL("image/jpeg");
        var pdf = JsPDF("", "pt", "a4")
        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        //当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight<pageHeight) {
            //在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；
            pdf.addImage(pageData, "JPEG", 5, 0, imgWidth, imgHeight)
            // pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);
        } else {
            // 分页
            while (leftHeight>0) {
                pdf.addImage(pageData, "JPEG", 5, position, imgWidth, imgHeight)
                leftHeight -= pageHeight
                position -= 841.89
                //避免添加空白页
                if (leftHeight>0) {
                    pdf.addPage()
                }
            }
        }
        pdf.save('儿童营养测评报告' + ".pdf")
        console.log( route.params)
        let printParam = "";
        let PrintMember = router.resolve({path:"/PrintMembers/" + route.params.groupId +"/" +  route.params.id +"/" + route.params.reportId + printParam,});
         const formfeed=()=>{
           setTimeout(() => window.open(PrintMember.href, "_blank"), 1000);
         }
         formfeed();
    })
  },2000);
  fetchData()
})
</script>

<style scoped>
#basic .title {
  font-size: 36px;
  width: 100%;
  text-align: center;
}
#basic #createTime {
  font-size: 16px;
  color:#999999;
  float: right;
}

.params {
  width: 100%;
  font-size: 22px;
  font-weight: bold;
}
.shu {
  width: 5px;
  height: 30px;
  background: #2AB28B;
  opacity: 1;
  border-radius: 100px;
  float: left;
  margin-right: 2%;
}
.subTitle {
  font-size: 30px;
  text-align: center;
  height: 30px;
  color: #2AB28B;
  /*border-bottom: 1px dashed  red;*/
}
.every {
  height: 35px;
  line-height: 35px;
  min-width: 33%;
  float: left;
  font-weight: bold;
}
#basic .symptom {
  text-align: left;
  line-height: 35px;
  float: left;
}

#basic {
  font-size: 16px;
  width: 100%;
  min-height: 1244px;
  overflow: hidden;
  padding: 0;
  word-break:break-all;
  /*margin: 60px auto 0 auto;*/
  box-shadow: var(--el-box-shadow-light);
  border-radius: var(--el-card-border-radius);
  background-color: var(--el-card-bg-color);
  /* color: var(--el-text-color-primary); */
  transition: var(--el-transition-duration);
  --el-card-border-color: var(--el-border-color-light, #ebeef5);
  --el-card-border-radius: 4px;
  --el-card-padding: 20px;
  --el-card-bg-color: var(--el-color-white);
}
#basic .symptom .every {
  width: 30%;
  float: left;
}
.symptom_content{
  width: 100%;
  float: left;

}

</style>
